<template>
	<view class="category-pages" :class="themeName" :style="[pageStyle]">
		<view class="clsp-bg p-20 flex" v-if="cloud_shop_enabled">
			<u-avatar :src="store_info.avatar" mode="square" size="80"></u-avatar>
			<view class="white bold m-l-20" style="font-size: 36rpx;">{{store_info.title}}</view>
		</view>
		<view v-for="(item, index) in pagesData" :key="index" :class="[item.name]">
			<template v-if="item.name == 'search' && !cloud_shop_enabled">
				<w-search v-show="item.show" :content="item.content" :styles="item.styles" :categoryId="category_id" />
			</template>
			<template v-if="item.name == 'category'">
				<w-category class="category" v-show="item.show" :content="item.content" :styles="item.styles"
					:height="height" />
			</template>
		</view>
		<!-- #ifdef MP -->
		<view class="tabbar" style="position: fixed;z-index: 999999;">
			<tabbar />
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="tabbar" style="position: fixed;z-index: 999999;">
			<tabbar />
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		apiGetPage
	} from "@/api/store";
	import {
		apiGoodsLists
	} from "@/api/goods";
	import {
		getRect
	} from "@/utils/tools";
	import {
		apiCloudShopStoreInfo,
		apiCloudShopVisit
	} from "@/api/cloudshop"
	import Cache from "@/utils/cache";
	export default {
		name: 'categoryTop',
		mixins: [MescrollMixin],
		data() {
			return {
				store_info: {},
				styles: {},
				pagesData: [],
				height: 0,
				goodsList: [],
				category_id: -1,
				cloud_shop_enabled: Cache.get('cloud_shop_enabled')
			};
		},
		onLoad() {
			apiGetPage({
				type: 2,
			}).then((res) => {
				const {
					common: {
						title
					},
					common,
					content,
				} = this.$zhTran(res);
				let atitle = title
				if (this.cloud_shop_enabled) {
					atitle = this.$zhTran('首页')
					uni.hideHomeButton()
				}
				uni.setNavigationBarTitle({
					title: atitle,
				});
				this.styles = common;
				this.pagesData = content;
				this.$nextTick(() => {
					this.getHeight();
					this.getStore()
				});
			});
		},
		computed: {
			pageStyle() {
				const {
					background_color,
					background_image,
					background_type
				} = this.styles;
				if (background_type == 0 || !background_image || !background_color) {
					return;
				}
				const style =
					background_type == 1 ? {
						"background-color": background_color,
					} : {
						"background-image": `url(${background_image})`,
					};
				return style;
			},
		},
		methods: {
			async getHeight() {
				const category = await getRect(".category");
				this.height = category.height;
			},
			getStore() {
				apiCloudShopStoreInfo({
					id: Cache.get('clsp_id')
				}).then((res) => {
					if (Object.keys(res).length > 0) {
						this.store_info = res
						Cache.set('clspInfo', res)
						apiCloudShopVisit({
							clsp_id: Cache.get('clsp_id')
						})
					}
				})
			},
			upCallback(page) {
				const pageNum = page.num;
				const pageSize = page.size;

				apiGoodsLists({
						page_no: pageNum,
						page_size: pageSize,
						clsp_id: Cache.get('clsp_id')
					})
					.then(({
						lists,
						page_size,
						count
					}) => {
						// 如果是第一页需手动置空列表
						if (page.num == 1) this.goodsList = [];
						// 重置列表数据
						this.goodsList = [...this.goodsList, ...lists];
						this.goodsList = this.$zhTran(this.goodsList)
						this.mescroll.endBySize(page_size, count);
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},
		}, // 使用mixin (在main.js注册全局组件)
	};
</script>

<style lang="scss">
	.clsp-bg {
		height: 120rpx;
		background-image: linear-gradient(90deg, rgba(255, 66, 110, 1) 0%, rgba(255, 20, 20, 1) 100%);
	}

	/*根元素需要有固定的高度*/
	page {
		height: 100%;
		box-sizing: border-box;
		// 支付宝小程序,钉钉小程序需添加绝对定位,否则height:100%失效: https://opendocs.alipay.com/mini/framework/acss#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98
		/* #ifdef MP-ALIPAY || MP-DINGTALK*/
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		/* #endif */
		/*需给父元素设置height:100%*/
		.category-pages {
			height: 100%;
			display: flex;
			flex-direction: column;
			background-repeat: no-repeat;
			background-size: 100% auto;

			/* 中间 */
			.category {
				flex: 1;
				min-width: 0;
				min-height: 0;
				/* 需给flex:1的元素加上最小高,否则内容超过会溢出容器 (如:小程序Android真机) */
				display: flex;
				flex-direction: column;
			}
		}
	}
</style>